<template>
    <div class="directives-wapper">
        <DebounceDirect />
        <ThrottleDirect />
        <CopyDirect />
        <DragDirect />
        <LongpressDirect />
        <WatermarkDirect />
    </div>
</template>
<script setup lang="ts" name="DirectivesInfo">
import CopyDirect from "./components/copyDirect/index.vue";
import DebounceDirect from "./components/debounceDirect/index.vue";
import DragDirect from "./components/dragDirect/index.vue";
import LongpressDirect from "./components/longpressDirect/index.vue";
import ThrottleDirect from "./components/throttleDirect/index.vue";
import WatermarkDirect from "./components/watermarkDirect/index.vue";
</script> 
<style lang="scss" scoped>
.directives-wapper {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    height: 100%;
    box-sizing: border-box;
    padding: 20px;
    overflow: auto;
    background-color: var(--el-bg-color);
    border: 1px solid var(--el-border-color-light);
    border-radius: 6px;
    box-shadow: 0 0 12px rgb(0 0 0 / 5%);

    .directives-item {
        box-sizing: border-box;
        width: 50%;
        min-width: 540px;
        height: 180px;
        padding-top: 20px;
        margin : 0px -1px -1px 0px; 
        border: 1px solid var(--el-border-color-light);
    }
}
</style>